<template>
  <div>
    <div>
      <el-card class="box-card">
        <el-row>
          <el-form :model="form" label-width="100px" class="demo-form-inline" :inline="true">
            <el-col :span="6">
              <el-form-item label="运单状态">
                <el-select v-model="form.status" placeholder="请选择">
                  <el-option value="" label="全部"></el-option>
                  <el-option value="1" label="新建"></el-option>
                  <el-option value="2" label="已装车"></el-option>
                  <el-option value="3" label="到达"></el-option>
                  <el-option value="4" label="到达终端网点"></el-option>
                  <el-option value="5" label="已签收"></el-option>
                  <el-option value="6" label="拒收"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="发件人姓名">
                <el-input v-model="form.senderName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发件人电话">
                <el-input v-model="form.senderPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发件人地址">
                <div class="block">
                  <el-cascader filterable :options="options" :value="senderAddressId"
                               @change="senderHandleChange" style="width: 100%;"
                               :props="{ label: 'name', value: 'id', children: 'pdAreaVOS' }" clearable>
                  </el-cascader>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="收件人姓名">
                <el-input v-model="form.receiverName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="件人电话">
                <el-input v-model="form.receiverPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="收件人地址">
                <div class="block">
                  <el-cascader filterable :options="options" :value="receiverAddressId"
                               @change="receiverHandleChange" style="width: 100%;"
                               :props="{ label: 'name', value: 'id', children: 'pdAreaVOS' }" clearable>
                  </el-cascader>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="queryPdTransportOrder">查询</el-button>
              <el-button @click="clearOption">清空</el-button>

            </el-col>
          </el-form>

        </el-row>
      </el-card>
    </div>
    <div>
      <el-card class="box-card" style="height: 500px">
        <div>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            max-height="400">

            <el-table-column
              prop="pdTransportOrder.id"
              label="编号"
              width="120">
            </el-table-column>
            <el-table-column
              label="运单状态"
              width="120" v-slot="scope">
              <template>
                {{
                  scope.row.pdTransportOrder.status == 1 ? '新建'
                    : scope.row.pdTransportOrder.status == 2 ? '已装车'
                      : scope.row.pdTransportOrder.status == 3 ? '到达'
                        : scope.row.pdTransportOrder.status == 4 ? '到达终端网点'
                          : scope.row.pdTransportOrder.status == 5 ? '已签收' : '拒收'
                }}
              </template>
            </el-table-column>
            <el-table-column
              label="调度状态"
              width="120" v-slot="scope">
              <template>
                {{
                  scope.row.pdTransportOrder.schedulingStatus == 1 ? '待调度'
                    : scope.row.pdTransportOrder.schedulingStatus == 2 ? '未匹配线路' : '已调度'
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="pdTransportOrder.createTime"
              label="下单时间"
              width="120">
            </el-table-column>
            <el-table-column
              prop="senderName"
              label="发件人姓名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="senderPhone"
              label="发件电话"
              width="120">
            </el-table-column>
            <el-table-column
              prop="senderAddress"
              label="发件地址"
              width="200" show-overflow-tooltip v-slot="scope">
              <template>
                {{ scope.row.senderAddress | getSendingAddress(options,scope.row) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="receiverName"
              label="收件姓名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="receiverPhone"
              label="收件电话"
              width="120">
            </el-table-column>
            <el-table-column
              label="收件地址"
              width="200" show-overflow-tooltip v-slot="scope">
              <template>
                {{ scope.row.receiverAddress | GetShippingAddress(options,scope.row) }}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <Button type="text" size="small"
                        :to="{path: '/sp-logistics/sp-transport-order',query:{id: scope.row.pdTransportOrder.id}}">
                  查看详情
                </Button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage" :page-sizes="[10, 15, 20,25]" :page-size="2"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      form: {}, //查询内容
      options: [],//地址数据
      tableData: [], // 订单数据
      currentPage: 1,//页面下标
      total: 0,//总页数
      pageSize: 10,//页面大小
      senderAddressId: [],// 发货地址值
      receiverAddressId: [],//收货地址
    }
  },
  async created() {
    await this.queryArea();
    await this.queryPdTransportOrder();
  },
  filters: {
    GetShippingAddress: function (row, options, row2) {
      let sheng = options.filter(item => item.id == row2.receiverProvinceId);
      let shi = sheng[0].pdAreaVOS.filter(item => item.id == row2.receiverCityId);
      let qu = shi[0].pdAreaVOS.filter(item => item.id == row2.receiverCountyId);
      return sheng[0].name + shi[0].name + qu[0].name + row2.receiverAddress
    },
    getSendingAddress: function (row, options, row2) {
      let sheng = options.filter(item => item.id == row2.senderProvinceId);
      let shi = sheng[0].pdAreaVOS.filter(item => item.id == row2.senderCityId);
      let qu = shi[0].pdAreaVOS.filter(item => item.id == row2.senderCountyId);
      return sheng[0].name + shi[0].name + qu[0].name + row2.senderAddress;
    },

  },
  methods: {
    /**
     * 根据订单查询运单id
     * @returns {Promise<void>}
     */
    async queryPdTransportOrder() {
      let result = await axios.post("/api/pd-aggregationcjj/pd-transport-order/queryPdTransportOrderPage", {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        condition: this.form
      });
      this.total = result.data.data.total;
      this.tableData = result.data.data.list;
    },

    // 查询地址
    async queryArea() {
      let result = await axios.post("/api/pd-aggregationcjj/pd-area/queryArea");
      this.options = result.data.data

    },
    //清空级联
    clearOption() {
      this.senderAddressId = [];   //v-model绑定值清空
      this.receiverAddressId = [];   //v-model绑定值清空
      this.form = {};
    },
    // 发货人选中地址
    senderHandleChange(value) {
      this.form.senderCountyId = value[2]
    },

    // 收货人选中地址
    receiverHandleChange(value) {
      this.form.receiverCityId = value[2]
    },
    // 选中页面大小
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryOrderPage();
    },
    //选择第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryOrderPage();
    },
  }
}
</script>
<style scoped>

</style>
